<template>
	<view class="teacher_card" @click="goTeacher">
		<view class="left">
			<image class="teacher-avatar" :src="props.teacher.callingBg || props.teacher.avatar" mode="aspectFit">
			</image>
		</view>
		<view class="right">
			<view class="u-m-b-16 u-flex u-flex-between u-flex-items-center">
				<view class="top">
					<view class="name u-main-color u-m-r-24">{{props.teacher.name}}</view>
					<view class="f-s-14 ">
						{{ props.teacher.type == 'L' ? '培训师&咨询师' : props.teacher.type == 'T' ? '培训师' : '咨询师' }}
					</view>
				</view>
				<!-- <view class="f-s-10" style="color: #2080F7;">{{ props.teacher.type == 'L' ? '培训师&咨询师' : props.teacher.type == 'T' ? '培训师' : '咨询师' }}</view> -->
				<!-- <tag :text="props.teacher.type == 'L' ? '培训师&咨询师' : props.teacher.type == 'T' ? '培训师' : '咨询师'"
					:size="10" :right="0" color="#3D8FFF" background="#EBF1FF" :radius="12"></tag> -->
				<!-- <tag :text="props.teacher.type == 'L' ? '培训师&咨询师' : props.teacher.type == 'T' ? '培训师' : '咨询师'"
					:size="10" :right="0" background="#ffffff" borderColor="rgba(32, 128, 247, .2)" color="#2080F7"></tag> -->
				<!-- <view class="f-s-12 u-info">
					{{ props.teacher.type == 'L' ? '培训师&咨询师' : props.teacher.type == 'T' ? '培训师' : '咨询师' }}
				</view> -->
				<!-- <up-switch v-model="status" :size="16" @change="changeOnline"></up-switch> -->
			</view>
			<view class="f-s-14 u-m-b-24 u-content-color">{{props.teacher.label}}</view>
			<view class="u-flex u-flex-items-center u-flex-wrap" 
				v-if="props.teacher.domainList && props.teacher.domainList.length > 0 ">
				<block v-for="(field,index) in props.teacher.domainList" :key="field.id">
					<!-- <tag :text="field.name" :right="8" :bottom="6" background="#4897FA" borderColor="#4897FA" color="#fff"></tag> -->
					<tag :text="field.name" :right="6" :bottom="6" background="#fff" borderColor="rgb(255, 87, 51,.2)" color="rgb(255, 87, 51)"></tag>
				</block>
			</view>
			<!-- <view class="sub-title-two u-tips-color">年龄段：{{props.teacher.ageGroup}}</view> -->
			<view class="sub-title-two u-tips-color">常驻城市：{{props.teacher.city}}</view>
			<view class="sub-title-two u-tips-color">
				价格区间：{{ props.teacher.priceFrom == '0' && props.teacher.priceTo == '0' ? '面议' :  props.teacher.priceFrom + ' - ' + props.teacher.priceTo+' 元/天' }}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		defineProps
	} from 'vue';
	import {
		setOnline
	} from '@/api/teacher.js'
	import tag from "@/components/common/tag.vue"
	import {
		toast
	} from '@/utils/common.js';
	const props = defineProps({
		teacher: Object,
	})
	// 讲师状态
	const status = ref(props.teacher.isOnline ? true : false);
	const changeOnline = (e) => {
		status.value = e // 切换状态
		setOnline(props.teacher.userId, status.value ? 'On' : 'Off').then(() => {
			console.info(props.teacher.name)
			uni.setClipboardData({
				data: props.teacher.name,
			});
			toast("状态已更新")
		})
	}

	function goTeacher() {
		uni.navigateTo({
			url: '/subPackages/teacher/index?userId=' + props.teacher.userId
		})
	}
</script>

<style lang="scss">
	.teacher_card {
		display: flex;
		margin-bottom: 12px;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(0, 0, 0, 0.06);
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.left {
			width: 120px;
			min-width: 120px;
			// 从左到右渐变
			background: linear-gradient(to right, #E8EBF2, #E8EBF2 40%, #EEEFF4 70%, #F3F4F8);
			border-radius: 8px 0 0 8px;
			height: auto;

			.teacher-avatar {
				width: 100%;
				height: 100%;
				display: flex;
				border-radius: 8px 0 0 8px;
			}
		}

		.right {
			flex: 1;
			overflow: hidden;
			padding: 12px;

			.top {
				display: flex;
				align-items: center;

				.name {
					font-size: 20px;
					font-weight: bolder;
					// background: linear-gradient(to bottom, #2583F7, #7BB6FF); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
					// -webkit-background-clip: text;/*将设置的背景颜色限制在文字中*/
					// -webkit-text-fill-color: transparent;/*给文字设置成透明*/
				}
			}

			.info {
				display: flex;
				margin-bottom: 10px;
				color: #c0c0c0;
				font-size: 14px;

				.ip_info {
					display: flex;
					align-items: center;
				}
			}

			.area {
				font-size: 16px;
			}
		}

	}
</style>